<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #head{
      height:40px;
      background-color: black;
      margin: 0;
      color: white;
      /*  设置行高为容器的高度 则文本会在垂直方向居中*/
      line-height: 40px;
    }
    #search,#lb{
        margin: 0 auto;
    /*    居中*/


    }
    #search{
        width: 1226px;
        height: 100px;
        background-color: pink;
        margin-top: 5px;
        margin-bottom: 5px;
        position: sticky;
        top:0;

    }
    #lb{
        height: 460px;
        width:1226px;
        background-color: aqua;
        position: relative;

    }
    .div1{
        width: 234px;
        height: 167px;
        background-color: green;
        float: left;
        margin-left: 232px;

    }
    .divlist{
        width:316px;
        height:170px;
        background-color: pink;
        float: left;
    }
    ul{
        list-style-type: none;
    }
    ul>li{
        float: left;
        margin-left: 10px;
        padding-right: 10px;
    }
    a{
        color: white;
        text-decoration: none;
    }
        span{
            margin: 0 .3em;
            color: #424242;
        }
        #left-btn,#right-btn{
            width: 40px;
            height: 70px;

        }
        #left-btn{
            position: absolute;
            left:234px;
            top:195px;
            background-image: url("../../imags/icon-slides.png");
            background-position: -84px;

        }
        #left-btn:hover{
            background-position: 0px;
        }
        #right-btn{
            position: absolute;
            right: 0px;
            top:195px;
            background-image: url("../../imags/icon-slides.png");
            background-position: -125px;

        }
        #right-btn:hover{
            background-position: -43px;
         }

        .tool{
            width: 84px;
            height: 454px;
            border: 1px solid red;
            position: fixed;
            right: 0px;
            bottom: 200px;

        }
        .tool>div{
            width: 84px;
            height: 90px;
            border-bottom: #f5f5f5;
            text-align: center;
        }
        .tool>div:hover{
            color: #ff5600;
        }

      </style>

</head>
<body>
<div id="head">
    <ul>
        <li><a href="https://www.mi.com/">小米官网</a>
        <span>|</span>
        </li>
        <li>小米商城<span>|</span></li>
        <li>小米澎湃os<span>|</span></li>
    </ul>

</div>
<div id="search">
  search
</div>
<div id="lb">
    <img src="../../imags/34e1aad7b0ca76545b89ba588990e782.webp" height="460" width="1226"/>
    <div id="left-btn"></div>
    <div id="right-btn"></div>
</div>
<div>
    <div class="div1">1</div>
    <div class="divlist"style="margin-left: 15px">2</div>
    <div class="divlist"style="margin-left: 15px">3</div>
    <div class="divlist"style="margin-left: 15px">4</div>
</div>

<div class="tool">
    <div>手机</div>
    <div>个人中心</div>
    <div>售后服务</div>
    <div>人工客服</div>
    <div>购物车</div>
</div>
</body>
</html>